import { BaseNode, type BaseNodeParams } from './baseNode';

export interface imageNodeParam extends BaseNodeParams {
  url?: string;
  imageData?: string;
}

export class ImageNode extends BaseNode {
  private _url: string;
  public _imageData: string;
  private _image: any;
  public _sourceImageData: string;

  public base64Image: any;

  private _imageCanvasClone: any;

  private _offscreenCanvasImage: any;

  public _aiShirtCanvas: any;

  constructor(param, _aiShirtCanvas) {
    const { url, imageData, ...rst } = param;
    super({ ...rst, type: 'image' });
    this._url = url;
    this._imageData = imageData;
    this._sourceImageData = param._sourceImageData;

    this._offscreenCanvasImage = param.offscreenCanvasImage;

    this._aiShirtCanvas = _aiShirtCanvas;
    // this.base64Image = pakoImageToBase64(this._imageData, this.width, this.height);
    this.updateSrc(param);
  }

  /**
   * 更新图片源
   * @param param
   */
  updateSrc(param) {
    this._url = param.url;
    this._imageData = param.imageData;
    this.width = param.width;
    this.height = param.height;
    this.x = param.x;
    this.y = param.y;
    this._sourceImageData = param._sourceImageData;
    // this.base64Image = pakoImageToBase64(this._imageData, this.width, this.height);
    this.updateBox({ x: param.x, y: param.y, width: param.width, height: param.height });

    this._offscreenCanvasImage = param.offscreenCanvasImage;

    // this.renderImageData(offfscreenCtx, this.x, this.y)

    // const canvas = uni.createOffscreenCanvas({type: '2d', width: this.width , height: this.height })
    // const ctx = canvas.getContext('2d')
    //
    // // console.log('sss 创建图片', canvas, canvas.id)
    // ctx.drawImage(this._imageData, 0, 0, this.width, this.height)
    // this._imageCanvasClone = canvas;
    //
    // wx.canvasGetImageData({
    //   canvasId: canvas.id,
    //   x: 0,
    //   y: 0,
    //   width: 100,
    //   height: 100,
    //   success(res) {
    //     // console.log(res.width) // 100
    //     // console.log(res.height) // 100
    //     // console.log(res.data instanceof Uint8ClampedArray) // true
    //     // console.log(res.data.length) // 100 * 100 * 4
    //   }
    // })
  }

  async render(ctx) {
    // console.log('画 图像 ---------------->');
    await this.renderImageData(ctx, this.x, this.y);
    // ctx.drawImage(this._imageCanvasClone, this.x, this.y);
  }

  /**
   * 渲染离屏图片
   */
  renderOffScreenCanvas() {
    const offScreenCtx = super.getOffScreenCanvas();
    this.renderImageData(offScreenCtx, 0, 0);
  }

  private getImageData() {
    return this._imageData;
  }

  public getOffScreenCanvasImage() {
    return this._sourceImageData;
    // fixme
    this.renderOffScreenCanvas();
    // console.log(this.getOffScreenCanvasImageMark());
    return this.getOffScreenCanvasImageMark(); // .getImageData(this.x, this.y, this.width, this.height);
  }

  async renderImageData(ctx: any, x, y) {
    return new Promise((resolve) => {
      ctx.save();
      ctx.translate(x + this.width / 2, y + this.height / 2);
      ctx.rotate((this.rotation * Math.PI) / 180);
      // console.log('renderImageData', this, { x, y });
      ctx.scale(this.scale * this.flipX, this.scale * this.flipY);
      // const image = await this.getImageData();

      // const image = this._aiShirtCanvas?._cacheImage[this._sourceImageData] || this._imageData;
      // //
      // // setTimeout( () => {
      //   ctx.drawImage(image, -this.width / 2, -this.height / 2, this.width, this.height); // 渲染图片
      //   ctx.restore();
      // },1000)

      // const image22 = ctx.canvas.createImage();
      // await image22.onload( () => {
      //   this._imageData = image22;
      //   ctx.drawImage(image22, -this.width / 2, -this.height / 2, this.width, this.height); // 渲染图片
      //   ctx.restore();
      // })
      // image22.src = this._sourceImageData

      if (this._type === 'image' && !this._imageData) {
        console.error('使用历史， 重新加载 图片');
        const canvas = uni.createOffscreenCanvas({ type: '2d', width: this.width, height: this.height });
        const image222 = canvas.createImage();
        image222.onload = () => {
          ctx.drawImage(image222, -this.width / 2, -this.height / 2, this.width, this.height); // 渲染图片
          ctx.restore();
          this._imageData = image222;
          resolve(true);
        };
        image222.src = this._sourceImageData;
      } else {
        ctx.drawImage(this._imageData, -this.width / 2, -this.height / 2, this.width, this.height); // 渲染图片
        ctx.restore();
        resolve(true);
      }

      // const ctx2 = canvas.getContext('2d');
      //
      // // console.log({canvas, ctx2})
      // // console.log(ctx.transferToImageBitmap())

      // wx.chooseImage({
      //   success: function(res){
      //     ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
      //     ctx.draw()
      //   }
      // })
      // uni.getImageInfo({
      //   src: this._imageData,
      //   success: (res) => {
      //     // console.log('sss 获取图片信息', res)
      //     // res.path 是图片的本地临时路径
      //     ctx.drawImage(res.path, -this.width / 2, -this.height / 2, this.width, this.height); // 渲染图片
      //     ctx.restore();
      //   },
      // });

      // ctx.fillText('图片', -this.width/2, -this.height/2)
      // ctx.fillStyle = 'red'
      // ctx.fillRect(-this.width/2, -this.height/2, this.width, this.height)
    });
  }

  public async copy() {
    const newNode = await super.copy();
    return new Promise((resolve) => {
      // 创建离屏 2D canvas 实例
      const canvas = uni.createOffscreenCanvas({ type: '2d', width: newNode.width, height: newNode.height });
      const image = canvas.createImage();
      image.onload = () => {
        newNode._imageData = image;
        // console.log('sss 克隆 图片', image);
        resolve(newNode);
      };
      image.src = newNode._sourceImageData + '?+date=' + +new Date();
    });
  }

  public exportData() {
    return {
      ...super.exportData(),
      url: this._url,
      imageData: null,
      sourceImageData: this._sourceImageData,
      _sourceImageData: this._sourceImageData,
    };
  }
}
